//var that;
class Tab{
    constructor(id){
        //that=this;
        // 获取元素
        this.main=document.querySelector(id);
        // 新增tab 按钮
        this.add=this.main.querySelector('.tabadd');
        // li的父元素
        this.ul=this.main.querySelector('.fisrstnav ul:first-child');
        // section 父元素
        this.fsection=this.main.querySelector('.tabscon');
        this.init();
    }
    init(){
         this.updateNode();
         // init 初始化操作让相关的元素绑定事件
         this.add.onclick=this.addTab.bind(this.add,this);
         for(var i=0;i<this.lis.length;i++){
            // 给每个小li存索引号
            this.lis[i].index=i;
            this.lis[i].onclick=this.toggleTab.bind(this.lis[i],this);
            this.remove[i].onclick=this.removeTab.bind(this.remove[i],this);
            this.spans[i].ondblclick=this.editTab;
            this.sections[i].ondblclick=this.editTab;
         }
    }
    // 因为我们动态添加元素 需要重新获取对应的元素
    // 获取所有的小li 和 section、删除tab按钮
    updateNode(){
        // tab 头
        this.lis=this.main.querySelectorAll('li');
        // tab 内容
        this.sections=this.fsection.querySelectorAll('section');
        // 删除tab按钮
        this.remove=this.main.querySelectorAll('.icon-guanbi');
        // tab标题的span
        this.spans=this.main.querySelectorAll('.fisrstnav li span:first-child');
    }
    // 1.切换功能
    toggleTab(that){
        // console.log(this.index);
        that.clearClass();
        this.className='liactive';
        that.sections[this.index].className='conactive';
    }
    // 清除所有li和section的类
    clearClass(){
        for(var i=0;i<this.lis.length;i++){
            this.lis[i].className='';
            this.sections[i].className='';
        }
    }
    // 2.添加功能
    addTab(that){
        that.clearClass();
        // (1) 创建li元素和section元素
        var random = Math.random();
        var li='<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
        var section=`<section class="conactive">测试${random}</section>`;
        // (2) 把这两个元素追加到对应的父元素里面,insertAdjacentHTML:详情查询mdn
        that.ul.insertAdjacentHTML('beforeend',li);
        that.fsection.insertAdjacentHTML('beforeend',section);
        // 再次执行init,让东动态生成的元素事件能够绑定
        that.init();
    }
    // 3.删除功能
    removeTab(that,e){
        // li里面的关闭按钮span会冒泡,会造成li做当前选项卡的切换,所以这里要阻止冒泡
        e.stopPropagation();
        var index=this.parentNode.index;
        // console.log(index);
        // 根据索引号删除对应的li和section  remove()方法可以直接删除指定的元素
        that.lis[index].remove();
        that.sections[index].remove();
        // 重新初始化
        that.init();
        // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
        if(document.querySelector('.liactive')) return false;   //删除完后发现有选中状态的li,不执行后面的操作
        // 当我们删除选中状态的这个li 的时候,让它的前一个li 处于选定状态
        index--;
        // 手动调用我们的点击事件,不需要鼠标触发
        // that.lis[index]为true,才会执行后面的调用,当index减到-1的时候,就没有这个tab了
        that.lis[index] && that.lis[index].click();
    }
    // 4.修改功能
    editTab(){
        // 这时的this是span
        var str=this.innerHTML;
        // 双击禁止选定文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML='<input type="text" />';
        var input=this.children[0];
        input.value=str;
        // 文本框里面的文字处于选定状态
        input.select();
        // 当我们离开文本框就把文本框里面的值给span
        input.onblur=function(){
            //  span是input的父亲
            this.parentNode.innerHTML=this.value;
        };
        // 按下回车也可以把文本框里面的值给span
        input.onkeyup=function(e){
            if(e.keyCode===13){
                // 手动调用表单失去焦点事件 不需要鼠标离开操作
                this.blur();
            }
        }
    }
}

new Tab('#tab');